<template>
  <div class="container-receptaudio" :class="{active: ReceivedFlag}">
    <!--
      <div>
        <button type="button" class="mui-btn mui-btn-success" @click='callRecept'>接受</button>
        <button type="button" class="mui-btn mui-btn-success" @click='callRefuse'>拒绝</button>
      </div>
    -->
    <div class="person-icon">
      <img src="../../../assets/touxiang.jpg" alt="没有头像">
      <span class="callerUser">{{showRec}}</span>
    </div>
      <!-- showRec: true 居右 false居中 -->
        <div class='droppedrec' @click="droppedRecBtn" :class='{active: showRec}'>
            <span class="icon-phone-hang-up"></span>
        </div>
            <!-- active: false 不展示  true展示 -->
        <div class='handingrec' @click="handingRecBtn" :class='{active: showRec}'>
            <span class="icon-phone" ></span>
        </div>
  </div>
</template>
<script>
// import addfriendssearchsub from './AddFriendsSearchSub'
import {mapMutations, mapState} from 'vuex'
import {RESET_SHOW_REC} from '../../../store/mutation-types.js'
  export default {
    props: ['ReceivedFlag'],
    data() {
      return {
          // false:没有收到其他人的语音邀请，组件不展示出来 ：true：展示
        // ReceivedFlag: false,
        // showRec: true
      }
    },
    computed: {
      ...mapState(['showRec'])
      // ...mapGetters(['com'])
    },
    components: {
    //   addfriendssearchsub
    },
    updated() {
      // console.log(this.$store.state.showRec, '88888888888888888888888888')
    },
    // beforeRouterleave() {
    //   this.showRec = true
    // },
    watch: {
      showRec(newVal) {
        console.log(newVal, ']]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]')
      }
    },
    methods: {
      ...mapMutations({
        resetShowRec: RESET_SHOW_REC
      }),
      handingRecBtn() {
        console.log('接受对方的视频')
        // this.showRec = false
        this.resetShowRec(false)
        console.log(this.$store.state.showRec)
        this.$imrtccall.acceptCall()
      },
      droppedRecBtn() {
        console.log('拒绝或者挂断对方的视频')
          // 整个组件不显示
        // this.ReceivedFlag = false
        this.$emit('childAudio', false)
        // this.showRec = true
        // this.resetShowRec(true)
        this.$imrtccall.endCall()
      }
    }
  }
</script>
<style lang='scss' scoped>
@import url('../../../public/scss/style.css');
.container-receptaudio{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(104, 104, 104);
    z-index: 12;
    transition: all 0.5s ease;
    transform: translateX(100%);
    &.active{
      transform: translateX(0)
    }
    .person-icon{
        width: 120px;
        height: 120px;
        position: absolute;
        left: 34vw;
        top: 15vh;
        img{
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .callerUser{
          padding: 10px;
          display: inline-block;
          color: white;
          font-size: 24px;
          width: 120px;
          text-align: center;
        }
    }
    .droppedrec{
        position: absolute;
        bottom: 10vh;
        left: 40vw;
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 50%;
        background: red;
        text-align: center;
        font-size: 30px;
        &.active{
            left: 70vw;
        }
    }
    .handingrec{
        position: absolute;
        bottom: 10vh;
        left: 16vw;
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 50%;
        background: green;
        text-align: center;
        font-size: 30px;
        display: none;
        &.active{
            display: block;
        }
    }
}

</style>
